<template>
  <div class="buildInfo-comp-ct c_page">
    <van-nav-bar :title="componentName" left-arrow @click-left="goback">
      <van-icon name="search" slot="right" />
    </van-nav-bar>
    <div class="c_container">
      <van-cell-group>
        <van-cell
          :title="item.displayName"
          :value="formData[item.name]"
          v-for="(item,idx) of formMap"
          :key="item.name"
          :class="{'backcolor':(idx%2==0)}"
        ></van-cell>
      </van-cell-group>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { Toast,Icon,NavBar  } from 'vant';
Vue.use(Toast).use(Icon).use(NavBar);
export default {
  name: 'bj_buildInfo',
  data() {
    return {
      componentName: '基本建设信息',
      projectId: -1,
      formMap: [],
      formData: {}
    }
  },
  methods: {
    goback(){
      this.$router.back(-1);
    }
  },
  mounted() {
    this.projectId = this.$route.params.pid;
    setTimeout(() => {
      //获取基本信息
      this.formMap = [
        { name: "TYPE", displayName: "人防工程类型" },
        { name: "FWFDXSMJ", displayName: "非人防地下室面积" },
        { name: "JGRFMJ", displayName: "兼顾人防面积(㎡)" },
        { name: "RFDXS", displayName: "人防设置地下层数" },
        { name: "PSYT", displayName: "地下室平时用途" },
        { name: "ZSYT", displayName: "地下室战时用途" },
        { name: "ZX_X", displayName: "防空地下室x坐标" },
        { name: "ZX_Y", displayName: "防空地下室y坐标" },
      ];
      this.formData = {
        TYPE: "人防工程类型" ,
        FWFDXSMJ: "非人防地下室面积" ,
        JGRFMJ: "兼顾人防面积(㎡)" ,
        RFDXS: "人防设置地下层数" ,
        PSYT: "平时用途" ,
        ZSYT: "战时用途" ,
        ZX_X: "地下室x坐标" ,
        ZX_Y: "地下室y坐标" 
      };
    }, 500);
  }
}
</script>
<style lang="scss" scoped>
.buildInfo-comp-ct {
  .van-cell-group {
    margin: 5px 8px;
    .van-cell {
      .van-cell__title {
        flex: 2;
        text-align: left;
        font-weight: bold;
      }
      .van-cell__value {
        flex: 3;
        text-align: left;
      }
      line-height: 40px;
    }
    .backcolor {
      background-color: #dff3fa;
    }
  }
}
</style>
